<template>
  <el-dialog
    :title="'详情'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="hospitalName"
        label="医院"
        width="180">
      </el-table-column>
      <el-table-column
        prop="departmentName"
        label="科室"
        width="180">
      </el-table-column>
      <el-table-column
        prop="extractNum"
        label="数量">
      </el-table-column>
      <el-table-column
        prop="isDone"
        label="是否完成">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isDone === 0" size="small" type="danger">未完成</el-tag>
          <el-tag v-else size="small">已完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="lookDetail(scope.row.extractRecordDetail)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 详情 -->
    <el-dialog
      width="60%"
      title="详情"
      :visible.sync="dialogTableVisible"
      append-to-body>
      <el-table :data="gridData">

        <el-table-column property="patientName" label="姓名"></el-table-column>
        <el-table-column property="gender" label="性别">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.gender === 1" size="small" type="success">男</el-tag>
            <el-tag v-else type="info" size="small">女</el-tag>
          </template>
        </el-table-column>
        <el-table-column property="hospitalizationDate" label="住院日期"></el-table-column>
        <el-table-column property="leaveHospitalDate" label="出院日期"></el-table-column>
        <el-table-column property="isDone" label="是否完成">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isDone === 0" size="small" type="danger">未完成</el-tag>
            <el-tag v-else size="small">已完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="lookRidDetail(scope.row.extractDetailPatientId)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogTableVisible = false">关闭</el-button>
    </span>
      <el-dialog
        width="60%"
        title="滦平县医保局实时查房系统"
        :center=true
        :visible.sync="lookDetailImgVisible"
        append-to-body>


          <el-row>
            <!-- 总共24个 -->
              <el-col :span="24"><span>姓名:{{this.lookDetailVo.patientName}}</span></el-col>
          </el-row>
          <el-row>
<!--            医院：中医院 科室：内科 病室号：213  病床号: 5-->
            <el-col :span="4"><span>医院：{{this.lookDetailVo.hospitalName}}</span></el-col>
            <el-col :span="4"><span>科室：{{this.lookDetailVo.departmentName}}</span></el-col>
            <el-col :span="4"><span>病室号：{{this.lookDetailVo.wardNumber}}</span></el-col>
            <el-col :span="4"><span>病床号: {{this.lookDetailVo.bedNumber}}</span></el-col>
          </el-row>
<!--        hospitalizationPictures-->
        <el-row>
          <el-col :span="4"><el-button type="primary">入院照片</el-button></el-col>
        </el-row>
        <el-row>
          <el-container>
            <el-table
              :data="this.lookDetailVo.hospitalizationPictures"
              :show-header=false
              style="width: 100%">
              <el-table-column>
                <template slot-scope="scope">
                  <el-main>
                    <div>
                      <img  slot="reference" :src="baseUrl + scope.row.imgUrl" style="width: 120px;">
                    </div>
                    <div>入院时间: {{scope.row.time}}</div>
                  </el-main>
                </template>
              </el-table-column>

            </el-table>
          </el-container>
        </el-row>
        <el-row>
          <el-col :span="4"><el-button type="primary">本次查房</el-button></el-col>
        </el-row>
        <el-row>
          <el-container>
            <el-table
              :data="this.lookDetailVo.thisRecords"
              :show-header=false
              style="width: 100%">
              <el-table-column>
                <template slot-scope="scope">
                <el-main>
                  <div>

                      <img  slot="reference" :src="baseUrl + scope.row.imgUrl" style="width: 600px;">

                  </div>
                  <div>入院时间: {{scope.row.time}}</div>
                </el-main>
                </template>
              </el-table-column>

            </el-table>
          </el-container>
        </el-row>
        <el-row>
          <el-col :span="4"><el-button type="primary">历史查房记录</el-button></el-col>
        </el-row>

        <el-row>
          <el-container>
            <el-table
              :data="this.lookDetailVo.historyRecords"
              :show-header=false
              style="width: 100%">
              <el-table-column> <template slot-scope="scope">

            <el-main>
              <div><img  slot="reference" :src="baseUrl + scope.row.imgUrl" style="width: 600px;"></div>
              <div>拍照时间: {{scope.row.time}}</div>
            </el-main>
              </template>
              </el-table-column>

            </el-table>

          </el-container>
        </el-row>
        <span slot="footer" class="dialog-footer">
      <el-button @click="lookDetailImgVisible = false">关闭</el-button>
    </span>
      </el-dialog>
    </el-dialog>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
      <!--      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>-->
    </span>
  </el-dialog>

</template>

<script>

    export default {
        data() {
            return {
                baseUrl: this.$http.adornUrl("/app/file/down"),
                handleImg: "/picture/2019/08/7bc4bf1700924d53b1896742c657400c.jpg",
                gridData: [],
                visible: false,
                dialogTableVisible: false,
                tableData: [],
                expands: [],
                lookDetailImgVisible: false,
                lookDetailVo:''
            }
        },
        methods: {


            init(id) {
                this.visible = true
                this.$http({
                    url: this.$http.adornUrl('/bs/extractRecordDetail/listByRecordId'),
                    method: 'get',
                    params: this.$http.adornParams({
                        'recordId': id
                    })
                }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.tableData = data.data
                    } else {
                        this.tableData = []
                    }
                })
            },
            lookDetail(detailId) {
                this.dialogTableVisible = true;
                this.$http({
                    url: this.$http.adornUrl('/bs/extractDetailPatient/listByDetailId'),
                    method: 'get',
                    params: this.$http.adornParams({
                        'detailId': detailId
                    })
                }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.gridData = data.data
                    } else {
                        this.gridData = []
                    }
                })
            },
            lookRidDetail(id) {
                this.lookDetailImgVisible = true;

                this.$http({
                    url: this.$http.adornUrl('/bs/patient/getDetailData'),
                    method: 'get',
                    params: this.$http.adornParams({
                        'extractDetailPatientId': id
                    })
                }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.lookDetailVo = data.res
                    } else {
                        this.lookDetailVo = ''
                    }
                })
            },
            // objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            //     console.log(row)
            //     if (columnIndex === 0) {
            //         if (rowIndex % 2 === 0) {
            //             return {
            //                 rowspan: 2,
            //                 colspan: 1
            //             };
            //         } else {
            //             return {
            //                 rowspan: 0,
            //                 colspan: 0
            //             };
            //         }
            //     }
            // }
        }
    }
</script>

<style>
  .el-main {
    /*background-color: #E9EEF3;*/
    /*color: #333;*/
    text-align: center;
    /*line-height: 160px;*/
  }
  /*.el-row {*/
  /*  margin-bottom: 20px;*/
  /*&:last-child {*/
  /*   margin-bottom: 0;*/
  /* }*/
  /*}*/
  /*.el-col {*/
  /*  border-radius: 4px;*/
  /*}*/
  /*.bg-purple-dark {*/
  /*  background: #99a9bf;*/
  /*}*/
  /*.bg-purple {*/
  /*  background: #d3dce6;*/
  /*}*/
  /*.bg-purple-light {*/
  /*  background: #e5e9f2;*/
  /*}*/
  /*.grid-content {*/
  /*  border-radius: 4px;*/
  /*  min-height: 36px;*/
  /*}*/
  /*.row-bg {*/
  /*  padding: 10px 0;*/
  /*  background-color: #f9fafc;*/
  /*}*/
  #table2 .el-table__expanded-cell {
    padding: 0 !important;
    border-bottom: none;
  }

  .hiderow .el-table__expand-column .el-icon {
    visibility: hidden;
  }
</style>

<style lang="scss" rel="stylesheet/scss" scoped>
  .tabBg {
    background: #fafafa !important;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
